<template>
    <el-row class="promotionplanadd">
        <el-col :span="24" class="content-header">促销方案配置--编辑
            <span class="left-10">
                <el-button type="text" @click="global.goPage($router, 'promotionplan', {});">返回</el-button>
            </span>
        </el-col>
        <el-card class="box">
            <el-row>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="分单规则基本信息" name="basic">
                        <el-row class="basic">
                            <el-col :span="23" :offset="1">
                                <el-form :model="dataForm" label-width="150px" :label-position="labelPosition">
                                    <el-form-item label="促销方案名称：" required>
                                        <el-col :span="12">
                                            <el-input v-model="dataForm.name" placeholder="促销方案名称"></el-input>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="起止时间：" required>
                                        <el-col :span="12">
                                            <el-date-picker v-model="dataForm.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="促销类型：" required>
                                        <el-col :span="12">
                                            <el-select v-model="dataForm.type" placeholder="促销类型" @change="typeChange">
                                                <el-option label="单品" value="1"></el-option>
                                                <el-option label="组合" value="2"></el-option>
                                                <el-option label="合购" value="3"></el-option>
                                            </el-select>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="促销方式：" required>
                                        <el-col :span="12">
                                            <el-select v-model="dataForm.way" placeholder="促销方式">
                                                <el-option v-for="item in way" :key="item.value" :label="item.name" :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="赠送方式：" required>
                                        <el-col :span="12">
                                            <el-select v-model="dataForm.donateWay" placeholder="赠送方式">
                                                <el-option v-for="item in donateWay" :key="item.value" :label="item.name" :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="优先级：" required>
                                        <el-col :span="12">
                                            <el-input-number v-model="dataForm.priority" :min="1" :max="100" label="优先级"></el-input-number>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="详情显示：" required>
                                        <el-col :span="12">
                                            <el-input type="textarea" autosize placeholder="详情显示" v-model="dataForm.detailShow">
                                            </el-input>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                    <el-collapse-item title="产品信息" name="product">
                        <el-tabs v-model="active2" type="card">
                            <el-tab-pane v-if="typeIsShow" label="类型" name="type">
                                <v-category v-model="selectedCategory" :object.sync="categoryObject" type="productCategory"></v-category> 
                            </el-tab-pane>
                            <el-tab-pane label="明细" name="detail" class="detail">
                                <v-productList v-model="productList"></v-productList>
                            </el-tab-pane>
                        </el-tabs>
                    </el-collapse-item>
                    <el-collapse-item title="促销规则" name="range">
                       <el-row>
                           <el-col :span="10">
                               
                           </el-col>
                           <el-col :span="14">

                           </el-col>
                       </el-row>
                    </el-collapse-item>
                    <el-collapse-item title="配送商" name="distributor">
                        <!-- <el-tabs v-model="active3" type="card">
                            <el-tab-pane label="客户类型" name="type">
                                <v-category v-model="selectedEnterType" :object.sync="enterTypeObject" type="enterType" :allflag="false"></v-category>
                            </el-tab-pane>
                            <el-tab-pane label="客户区域" name="range">
                                <v-category v-model="selectedEnterRange" :object.sync="enterRangeObject" type="enterRange"></v-category>
                            </el-tab-pane>
                            <el-tab-pane label="客户明细" name="detail" class="detail">
                                <el-row :gutter="20">
                                    <el-col :span="2">
                                        <el-button plain size="small">添加</el-button>
                                    </el-col>
                                    <el-col :span="22">
                                        <v-enterList v-model="enterList"></v-enterList>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs> -->
                    </el-collapse-item>
                </el-collapse>
                <el-col :span="24" class="foot-button">
                    <el-button size="small" type="primary" @click="submitForm">提交</el-button>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>
<script>
import "./add.scss";
import router from "@/router/index";
import category from "@/common/category/index.vue";
import enterList from "@/common/enterList/index.vue";
import productList from "@/common/productList/index.vue";

export default {
  data() {
    return {
      labelPosition: this.global.labelPosition,
      activeNames: ["range"],
      dataForm: {
        name: "",
        dateRange: [],
        type: "",
        way: "",
        donateWay: "",
        priority: "",
        detailShow: ""
      },
      way: [],
      donateWay: [],
      wayArr: {
        0: [
          {
            name: "满赠",
            value: "1"
          },
          {
            name: "满减",
            value: "2"
          },
          {
            name: "满折",
            value: "3"
          }
        ],
        1: [
          {
            name: "赠送",
            value: "4"
          },
          {
            name: "返现",
            value: "5"
          },
          {
            name: "折扣",
            value: "6"
          }
        ]
      },
      donateWayArr: {
        0: [
          {
            name: "数量",
            value: "1"
          },
          {
            name: "金额",
            value: "2"
          }
        ],
        1: [
          {
            name: "数量",
            value: "1"
          }
        ]
      },
      selectedCategory : [],
      categoryObject : [],
      productList : [],
      active2 : "detail",
      typeIsShow : false,
    };
  },
  components: {
    "v-category": category,
    "v-enterList": enterList,
    "v-productList": productList,
  },
  methods: {
    submitForm: function() {},
    typeChange: function() {
      this.dataForm.way = "";
      this.dataForm.donateWay = "";
      let type = this.dataForm.type;
      if (type == "1") {
        this.typeIsShow = true;
        this.way = this.wayArr["0"];
        this.donateWay = this.donateWayArr["0"];
      } else if (type == "2" || type == "3") {
        this.typeIsShow = false;
        this.way = this.wayArr["1"];
        this.donateWay = this.donateWayArr["1"];
      }
    }
  },
  watch: {},
  mounted: function() {},
  created: function() {},
  beforeDestroy: function() {}
};
</script>